<template>
  <div>
    value: {{ value }}
    <!-- <input :value="value" @keyup.enter="onKeyUp" /> -->
    <input v-model="value" @keyup.enter="onKeyUp" />
  </div>
</template>

<script>
/**
 * 数据往下流 - 逻辑往上走
 *
 * v-model是一个双向数据绑定特性的指令，本身就带了 设置和获取 这两个功能
 * 注意点：（如果以后大家碰到v-model的组件，状态让这个组件自己维护，不需要数据往下流）
 *
 * 因为：v-model的本质就是使用了 （动态绑定 + 事件监听）来实现的。
 *
 * 如果封装组件的时候，碰到了v-model.可以暂时采用
 * 动态绑定+事件监听的方式去处理
 * 或者，让v-model的值在内部绑定（组件自己，维护自己的状态）
 */
export default {
  data() {
    return {
      value: '',
    }
  },
  methods: {
    onKeyUp() {
      this.$emit('onKeyUp', this.value)
      this.value = ''
    },
  },
}
</script>

<style></style>
